<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">报表查询</span>
			<span class="h2">工程建设土地征用分类统计表</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<p class="titlest">统计表3 （ {{proStr}} ）项目建设土地征用分类统计表<span style="font-size: 14px;">(按已支付)</span> </p>
			<div class="left-content " style="margin-bottom: 20px;">
				<label for="">工程项目:</label>
				<el-select v-model="proValue" placeholder="请选择" filterable @change="fnChange()">
					<el-option v-for="item in project" :key="item.ID" :label="item.Name" :value="item.ID">
					</el-option>
				</el-select>
				<label for="">行政区域:</label>
				<el-cascader :options="regions" v-model="region" separator='-' change-on-select filterable clearable></el-cascader>
				<el-radio-group v-model="company" class="radios">
					<el-radio :label="1">m<sup>2</sup></el-radio>
					<el-radio :label="2">亩</el-radio>
				</el-radio-group>
				<el-button type="primary" size="small" @click="fnSerach">查询</el-button>
				<span class="fr" style="padding-top: 5px;">{{datas | Format}}</span>
				<!-- <label for="" style="margin-left:10px;">单位:</label>
			<el-radio-group v-model="rate" @change="change()" class="radiot">
				<el-radio :label="1">平方米</el-radio>
				<el-radio :label="2">亩</el-radio>
			</el-radio-group> -->
				<!-- <div style="text-align: center;">
					<span>1征地&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<span>数量</span>
					
				</div> -->
				<div class="tables">
					<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
						<thead>
							<!--<tr>
								<th>序号</th>
								<th>县</th>
								<th>镇</th>
								<th v-for="(item,index) in ColCaptions" :key="index">{{item.colCaption}}</th>
							</tr>-->
							<tr>
								<th>序号</th>
								<th>县</th>
								<th>镇</th>
								<th v-for="(item,index) in ColCaptions" :key="index">{{item.colCaption}}</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(p,index) in ReportData" :key="index">
								<td>{{index+1}}</td>
								<td>{{p.Level1}}</td>
								<td>{{p.Level2}}</td>
								<td v-for="(item,index) in ColCaptions" :key="index">{{p[item.colName]}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import api from "../../axios/api";
	export default {
		name: "LandClass",
		data() {
			return {
				company: 1,
				loading: false,
				rate: 1,
				proValue: "",
				project: [],
				proStr: '',
				ColCaptions: [], //列标题
				ReportData: [], //数据
				regions: [],
				region: [],
				datas: new Date(),
			};
		},
		filters: {
			Format: function(fmt) {
				if(fmt) {
					let date = new Date(fmt);
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					let s = date.getHours() // 小时
					let f = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() // 分
					let g = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() // 秒
					return y + '-' + m + '-' + d + ' ' + s + ':' + f + ':' + g;
				} else {
					return ''
				}
			}
		},
		mounted() {
			setInterval(() => {
				this.datas = new Date()
			}, 1000)
			this.zList()
		},
		methods: {
			//工程项目列表
			zList() {
				this.$post(api.getlistde).then(response => {
					if(response.isOK == true && response.state == 200) {
						this.project = response.Data;
						this.proValue = this.project[0].ID;
						this.anonymousget(this.proValue)
						this.proStr = this.project[0].Name;

					} else {
						this.loading = false;
						this.$message.error(response.msg);
					}
				}).catch((error) => {
					this.loading = false;
				})
			},
			//获取行政区域
			anonymousget(val) {
				this.regions = [];
				this.region = [];
				if(!val) {
					return false;
				}
				this.$get(api.anonymousget + "/" + val).then(response => {
					if(response.data.isOK == true && response.data.state == 200) {
						for(var i = 0; i < response.data.Data.length; i++) {
							this.regions.push({
								label: response.data.Data[i].RegionName,
								value: response.data.Data[i].ID,
								ParentID: response.data.Data[i].ParentID
							});
						}
						console.log(this.regions)
						this.regions = this.$toTree(this.regions);
						this.region.push(this.regions[0].value);
						this.getData();
					} else {
						this.$message.error(response.data.msg);
					}
				}).catch((error) => {
					this.loading = false;
				})
			},
			fnChange() {
				for(let i = 0; i < this.project.length; i++) {
					if(this.proValue == this.project[i].ID) {
						this.proStr = this.project[i].Name
					}
				}
				this.anonymousget(this.proValue)
			},
			fnSerach() {
				this.getData()
			},
			getData() {
				console.log(this.region)
				this.loading = true;
				this.$get(api.retport3 + '/' + this.proValue + '/' + this.region[this.region.length - 1] + '/' + this.company)
					.then(response => {
						console.log(response)
						if(response.data.isOK == true && response.data.state == 200) {
							this.ColCaptions = response.data.Data.ColCaptions;
							this.ReportData = response.data.Data.ReportData;
							for(var i = 0; i < response.data.Data.ReportData2.length; i++) {
								for(var k in response.data.Data.ReportData2[i]) {
									if(k != 'Level1' || k != 'Level2') {
										this.ReportData[i][k] = response.data.Data.ReportData2[i][k]
									}
								}
							}
							for(var i = 0; i < response.data.Data.ReportData3.length; i++) {
								for(var k in response.data.Data.ReportData3[i]) {
									if(k != 'Level1' || k != 'Level2') {
										this.ReportData[i][k] = response.data.Data.ReportData3[i][k]
									}
								}
							}
							console.log(arr)

							this.loading = false;
						} else {
							this.loading = false;
							this.ColCaptions = [];
							this.ReportData = [];
							this.$message.error(response.data.msg);
						}
					})
					.catch(error => {
						this.loading = false;
					});
			}
		}
	};
</script>
<style scoped>
	.titlest {
		text-align: center;
		font-size: 20px;
		text-align: center;
		font-weight: 600;
		margin: 20px auto;
		color: #909399;
	}
	
	.radiot .el-radio+.el-radio {
		margin-left: 10px;
	}
	
	.tables {
		width: 100%;
		margin-top: 20px;
	}
	
	.tables table {
		color: #606266;
		margin: auto;
		border-collapse: collapse;
		font-size: 12px;
	}
	
	.tables table td,
	.tables table th {
		text-align: center;
		padding: 5px;
		border: 1px solid #ebeef5;
	}
</style>